﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PicUpLoad.ascx.cs" Inherits="Test.usercontrol.PicUpLoad" %>

<!-- 1.浏览本地文件，不上传，点击保存按钮时再统一上传，保存图片的代码在C#文件中 -->

<script type = "text/javascript" language = "javascript" >

    function piclistCallBack(response) {
        var json = eval("(" + response + ")");
        var record = json.record;

        var recordLength = record.length;
        for (var i = 0; i < recordLength; i++) {
            var picid = 1;

            if (i > 0) picid = createPic();

            $("#file" + picid).attr('disabled', 'true');
            // 图片显示                    
            document.getElementById("img" + picid).src = record[i].actpath;

            // 处理浏览器兼容性
            if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 1) {
                document.getElementById("imgsize" + picid).innerText = "(" + parseInt(parseInt(record[i].filesize) / 1024) + " k)";
            } else {
                document.getElementById("imgsize" + picid).textContent = "(" + parseInt(parseInt(record[i].filesize) / 1024) + " k)";
            }

            document.getElementById("smallurlfile" + picid).value = record[i].prevpath_old;
            document.getElementById("bigurlfile" + picid).value = record[i].actpath_old;
            document.getElementById("filesize" + picid).value = record[i].filesize;
            addOrCutData(1, "hSmallurlfile", record[i].prevpath_old);
            addOrCutData(1, "hBigurlfile", record[i].actpath_old);
            addOrCutData(1, "hFilesize", record[i].filesize);
        }
    }

    // 新增上传域

    function createPic() {
        var sample = document.getElementById("pic{picID}").innerHTML;
        var pics = document.getElementById("picRoot").children;
        var lastId = 0; // 上传域编号

        if (pics.length == 0) {
            lastId = 1;
        } else {
            lastId = document.getElementById("pic" + pics.length).id.replace("pic", "");
        }

        var id = parseInt(lastId) + 1;
        if (id > 20) {
            alert("达到上传上限！");
            return false;
        }

        var temp = sample.replace(/{picID}/g, id); // 替换所有{picID}
        var div = document.createElement("div");
        div.setAttribute("id", "pic" + id);
        document.getElementById("picRoot").appendChild(div);
        div.innerHTML = temp;

        return id;
    }

    //删除上传域

    function deletePic(picid) {
        var smallurlfile = document.getElementById("smallurlfile" + picid).value;
        var bigurlfile = document.getElementById("bigurlfile" + picid).value;
        var filesize = document.getElementById("filesize" + picid).value;

        LexunJS.addOrCutData(0, "hSmallurlfile", smallurlfile);
        LexunJS.addOrCutData(0, "hBigurlfile", bigurlfile);
        LexunJS.addOrCutData(0, "hFilesize", filesize);

        document.getElementById("pic" + picid).innerHTML = "";
    }


    // 浏览本地文件

    function onUploadImgChange(picid) {
        var sender = document.getElementById("file" + picid);
        if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) {
            alert('图片格式无效！');
            return false;
        }
        var objPreview = document.getElementById('img' + picid);
        var objPreviewFake = document.getElementById('preview_fake' + picid);

        if (sender.files && sender.files[0]) {
            objPreview.style.display = 'block';
            objPreview.style.width = 'auto';
            objPreview.style.height = 'auto';

            // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径   
            objPreview.src = sender.files[0].getAsDataURL();
        } else if (objPreviewFake.filters) {
            // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果   
            //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决   

            // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径   
            sender.select();
            var imgSrc = document.selection.createRange().text;

            objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;

            objPreviewFake.style.width = '200px';
            objPreviewFake.style.height = '100px';
            objPreviewFake.style.marginTop = '0px';
            objPreviewFake.style.marginLeft = '0px';
            objPreview.style.display = 'none';
        }
    }

    // 火狐下加载图片

    function onPreviewLoad(picid) {
        var imgObj = document.getElementById("img" + picid);
        //imgObj.style.width = '200px';   
        //imgObj.style.height = '100px';   
        imgObj.style.marginTop = '0px';
        imgObj.style.marginLeft = '0px';
    }

</script>

<div id="picRoot">
    <div id="pic1">
        <div id="preview_wrapper1">
            <div id="preview_fake1" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image'); position:relative; ">
                <img id="img1" OnInit="onPreviewLoad(1)" />  
                <span id="imgsize1"></span>                
            </div>
        </div>
        <input id="file1" name="file1" type="file" style="width: 400px;" onchange="onUploadImgChange(1)" />
        <span title="删除" style="width: 60px; text-align: right;"><a href="javascript:deletePic(1)">
            X&nbsp;删除</a></span>
        <input id="smallurlfile1" type="hidden" />
        <!-- 隐藏域保存大图地址 -->
        <input id="bigurlfile1" type="hidden" />
        <input id="filesize1" type="hidden" />
    </div>
</div>
<div>
    <input type="button" value="继续添加" onclick="createPic()" />
</div>
<div style="display: none">
    <div id="pic{picID}">
        <div id="preview_wrapper{picID}">
            <div id="preview_fake{picID}" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image'); position:relative; ">
                <img id="img{picID}" OnInit="onPreviewLoad('{picID}')" /> 
                <span id="imgsize{picID}"></span>                
            </div>
        </div>
        <input id="file{picID}" name="file{picID}" type="file" style="width: 400px;" onchange="onUploadImgChange('{picID}')" />  
        <span title="删除" style="width: 60px; text-align: right;"><a href="javascript:deletePic('{picID}')">
            X&nbsp;删除</a></span>
        <input id="smallurlfile{picID}" type="hidden" />
        <!-- 隐藏域保存大图地址 -->
        <input id="bigurlfile{picID}" type="hidden" />
        <input id="filesize{picID}" type="hidden" />
    </div>
</div>
<input id="hSmallurlfile" name="hSmallurlfile" type="hidden" />
<input id="hBigurlfile" name="hBigurlfile" type="hidden" />
<input id="hFilesize" name="hFilesize" type="hidden" />



